import AMapLoader from '@amap/amap-jsapi-loader';
import { useEffect } from 'react';
const AMapSearch = () => {
  const mapContainer = Math.random().toString(36).slice(-8);

  useEffect(() => {
    AMapLoader.load({
      key: '9405f770fde14f10f0bae261b4310e55', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Geolocation', 'AMap.Marker'],
    })
      .then((AMap) => {
        const amap = new AMap.Map(mapContainer, {
          // mapcontainer为容器的id
          zoom: 15, //初始化地图层级
          center: [106.498349, 29.594284], //初始化地图中心点
          viewMode: '3D', //是否为3D地图模式
        });
        const markerContent =
          '' +
          '<div class="custom-content-marker">' +
          '   <img src="https://xtbs.ljsyy.net/resources/qrcode/poi-marker-default.png">' +
          '   <div class="close-btn">广电大厦-东门</div>' +
          '</div>';

        // 标记
        const marker = new AMap.Marker({
          position: new AMap.LngLat(106.498349, 29.594284),
        //   offset: new AMap.Pixel(-30, -10),
          // icon: icon, // 添加 Icon 实例
          content: markerContent,
          label: '重庆广电大厦',
        });
        // 地图添加标记
        amap.add(marker);

        // amap.on('click', showInfoClick);
      })
      .catch((e) => {
        console.log(e);
      });
  }, []);

  return <div id={mapContainer} style={{ width: '100%', height: '100%' }} />;
};

export default AMapSearch;
